<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>放置奇兵旋涡</title>
    <link rel="stylesheet" href="css/reset.css" />
  </head>
  <style>
    h3 {
      text-align: center;
    }
    .tab {
      display: flex;
      justify-content: center;
    }
    .tab div {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: cornflowerblue;
      color: #fff;
      border-radius: 4px;
      margin: 10px;
      font-size: 20px;
      cursor: pointer;
    }
    .picShow img {
      height: 50px;
    }
    .selected ul {
      text-align: center;
    }
    .selected ul li {
      width: 50px;
      height: 50px;
      border: 1px solid #000;
      border-radius: 4px;
      display: inline-block;
      vertical-align: middle;
    }
    .selected ul li img {
      height: 100%;
    }
    .selected ul button {
      width: 70px;
      vertical-align: middle;
      line-height: 35px;
      text-align: center;
      background: cornflowerblue;
      color: #fff;
      border-radius: 4px;
      border: 0;
      cursor: pointer;
    }
    .monster_item {
      display: flex;
    }
    .monster_item img {
      width: 16.6%;
      height: 16.6%;
    }
    .box {
      overflow: hidden;
    }
    .box ul {
      float: left;
      width: calc(16% - 20px);
      width: calc(40% - 20px);
      margin: 10px;
    }
    .box ul li {
      width: 100%;
      border: 5px solid #fff;
      margin-bottom: 3px;
    }
    .box ul li.rowTag {
      border: 5px solid red;
    }
  </style>
  <body>
    <div id="container">
      <div class="tab">
        <div>勇敢</div>
        <div>挑战</div>
      </div>
      <!-- <h3>选择你遇到的英雄吧</h3> -->
      <h3>请选择 吧</h3>
      <div class="picShow">
        <img src="./img/guangfa.png" alt="" />

        <img src="./img/jiali.png" alt="" />
        <img src="./img/jige.png" alt="" />
        <img src="./img/anmu.png" alt="" />
        <img src="./img/anzhan.png" alt="" />
        <img src="./img/beibei.png" alt="" />
        <img src="./img/guanggong.png" alt="" />
        <img src="./img/shadiao.png" alt="" />
        <img src="./img/gezi.png" alt="" />
        <img src="./img/3000.png" alt="" />
        <img src="./img/gumu.png" alt="" />
        <img src="./img/dayan.png" alt="" />
      </div>
      <div class="search">
        <div class="selected">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <button>清除</button>
          </ul>
        </div>
      </div>
      <div class="box brave_box">
        <ul>
          <li>
            <div class="monster_item"></div>
          </li>
          <li>
            <div class="monster_item"></div>
          </li>
          <li>
            <div class="monster_item"></div>
          </li>
          <li>
            <div class="monster_item"></div>
          </li>
          <li>
            <div class="monster_item"></div>
          </li>
          <li>
            <div class="monster_item"></div>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script>
    const h1 = "gezi"; //鸽子
    const h2 = "jiali"; //嘉丽
    const h3 = "beibei"; //贝尔兰
    const h4 = "jige"; //暗龙
    const h5 = "guanggong"; //光弓
    const h6 = "guangfa"; //光法
    const h7 = "3000"; //3000
    const h11 = "huomu"; //火牧
    const h8 = "gumu"; //古牧
    const h9 = "shadiao"; //沙雕
    const h10 = "dayan"; //大眼
    var arr = [h1, h3, h2, h4, h5, h6, h7, h8, h9, h10];
    var ulLen = $(".brave_box ul").length;
    var monsterNum = 6;
    for (var i = 0; i < ulLen; i++) {
      //一个等级有几个球
      for (var j = 0; j < 6; j++) {
        //一层球的个数
        for (var k = 0; k < monsterNum; k++) {
          $(".box ul")
            .eq(i)
            .children("li")
            .eq(j)
            .children(".monster_item")
            .append(
              '<img src="./img/' +
                arr[Math.floor(Math.random() * 10)] +
                '.png">'
            );
        }
      }
    }
    //选择怪物
    var selectBox = $(".selected ul li");
    var selectBoxBtn = $(".selected ul  button");
    var braveMonsterRow = $(".brave_box ul li");
    $(".picShow img").click(function() {
      var that = $(this);
      var isSelect = false;

      selectBox.map((index, item) => {
        if ($(item).html() == "" && !isSelect) {
          selectBox.eq(index).html(that.clone());
          positionMonster();
          isSelect = true;
        }
      });
    });
    //清除
    selectBoxBtn.click(function() {
      var imgNum = selectBox.find("img").length;
      selectBox.eq(imgNum - 1).html("");
      positionMonster(); //
    });

    //渲染查找对应怪物位置
    var starStr = "";
    var starArr, itemArr; //选中图片和图鉴作对比
    function positionMonster() {
      starArr = [];
      $(".selected ul li img").map((index, item) => {
        starArr.push($(item).attr("src"));
      });
      braveMonsterRow.map((indexs, items) => {
        itemArr = [];
        $(items)
          .find("img")
          .map((indexss, itemss) => {
            itemArr.push($(itemss).attr("src"));
          });
        // console.log(itemArr)
        //console.log(starArr)
        if (
          starArr.every(
            sitem => itemArr.indexOf(sitem) > -1 && starArr.length > 0
          )
        ) {
          braveMonsterRow.eq(indexs).addClass("rowTag");
        } else {
          braveMonsterRow.eq(indexs).removeClass("rowTag");
        }
      });
      console.log(starArr.length);
      if (starArr.length == 0) {
        init();
      }
    }

    //清空选择
    function init() {
      $(".brave_box ul li").removeClass("rowTag");
    }
  </script>
</html>
